<template>
  <div class="app">
    <div class="lis_home">
      <userMsg @showFn="showFn" v-if="show" />
      <changeMsg @showFn="showFn" v-if="!show" />
    </div>
  </div>
</template>

<script>
import userMsg from './compoents/userMsg.vue'
import changeMsg from './compoents/changeMsg.vue'
export default {
  components: { userMsg, changeMsg },
  data() {
    return {
      show: true,
    }
  },
  methods: {
    showFn() {
      this.show = !this.show
    },
  },
}
</script>

<style lang="less" scoped>
.app {
  width: 100%;
  height: 100vh;
  padding: 96px 16px;
}
.lis_home {
  background-color: #fff;
  width: 100%;
  border-radius: 2px;
  max-width: 1432px;
  margin: auto;
  overflow: hidden;
}
.home_list {
  border: 1px solid #dddddd;
  border-bottom: 0px solid #000;
}
</style>
